<template>
  <div id="box">
    <el-row>
      <el-col :span="22" :push="1">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="ETC管理" name="first">
            <div
              class="grid-content bg-purple"
              style="height: 77px; float: left"
            >
              <span style="line-height: 77px; font-size: 14px"> </span>
              <span style="margin-left: 20px">
                <el-button type="primary" size="small" @click="addCarFuelcard"
                  >添加新卡</el-button
                >
              </span>
              <div
                style="
                  width: 800px;
                  float: right;
                  margin-top: 22px;
                  margin-left: 40px;
                "
              >
                <el-form
                  :inline="true"
                  :model="formInline"
                  size="mini"
                  class="demo-form-inline"
                >
                  <el-form-item>
                    <el-input
                      v-model="formInline.etcId"
                      placeholder="卡号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="卡类型">
                    <el-select
                      v-model="formInline.etcType"
                      placeholder="卡类型"
                    >
                      <span v-for="(item, index) in carStates" :key="index">
                        <el-option
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </span>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="grid-content bg-purple" style="height: 400px">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="etcId" label="卡号" width="300">
                </el-table-column>
                <el-table-column prop="etcType" label="类型" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.etcType == 0">储值卡</span>
                    <span v-if="scope.row.etcType == 1">记账卡</span>
                  </template>
                </el-table-column>
                <el-table-column prop="etcMoney" label="当前余额">
                </el-table-column>
                <el-table-column prop="carNumber" label="车牌号">
                </el-table-column>
                <el-table-column prop="etcTime" label="添加时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="140">
                  <template slot-scope="scope">
                    <el-button
                      @click="rejectClick(scope.row.id)"
                      type="text"
                      size="small"
                      >修改</el-button
                    >
                    <el-button
                      @click="delectClick(scope.row.id)"
                      type="text"
                      size="small"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

              <div class="grid-content bg-purple-dark">
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>

            <el-dialog
              :title="title"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <span>
                <el-form ref="form" :model="form" label-width="80px">
                  <span v-model="form.id" hidden></span>
                  <el-form-item label="卡号">
                    <el-input v-model="form.etcId" :disabled="flag"></el-input>
                  </el-form-item>
                  <el-form-item label="选择车辆">
                    <el-select v-model="form.etcNumber">
                      <el-option
                        v-for="item in carNumbers"
                        :key="item.id"
                        :label="item.carNumber"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="类型">
                    <el-radio v-model="form.etcType" label="0">储值卡</el-radio>
                    <el-radio v-model="form.etcType" label="1">记账卡</el-radio>
                  </el-form-item>
                  <span v-show="form.etcType == 0">
                    <el-form-item label="余额">
                      <el-input
                        v-model="form.etcMoney"
                        style="width: 100px"
                        :disabled="flag"
                      ></el-input
                      >元
                    </el-form-item>
                  </span>
                </el-form>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onaddSubmit">确 定</el-button>
              </span>
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane label="消费明细" name="second">
            <div
              class="grid-content bg-purple"
              style="height: 77px; float: left"
            >
              <span style="line-height: 77px; font-size: 14px"> </span>
              <span style="margin-left: 20px">
                <el-button
                  type="primary"
                  size="small"
                  @click="addCarrechargerecord"
                  >添加新记录</el-button
                >
              </span>
              <div
                style="
                  width: 1000px;
                  float: right;
                  margin-top: 22px;
                  margin-left: 40px;
                "
              >
                <el-form
                  :inline="true"
                  :model="formInline"
                  size="mini"
                  class="demo-form-inline"
                >
                  <el-form-item>
                    <el-input
                      v-model="formInline2.etcId"
                      placeholder="卡号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-date-picker
                      v-model="formInline2.consumeTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="卡类型">
                    <el-select
                      v-model="formInline2.etcType"
                      placeholder="卡类型"
                    >
                      <span v-for="(item, index) in carStates" :key="index">
                        <el-option
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </span>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit1">搜索</el-button>
                    <el-button type="primary" @click="reset1">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="grid-content bg-purple">
              <el-table :data="tableData2" border style="width: 100%">
                <el-table-column prop="etcId" label="卡号" width="200">
                </el-table-column>
                <el-table-column prop="carNumber" label="车牌号">
                </el-table-column>
                <el-table-column prop="consumeType" label="使用方式">
                  <template slot-scope="scope">
                    <span v-if="scope.row.consumeType == 0">道路收费</span>
                    <span v-else>停车费</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="consumeMoney"
                  label="消费金额"
                  width="150"
                >
                </el-table-column>
                <el-table-column prop="consumeSite" label="交易地点">
                </el-table-column>
                <el-table-column prop="consumeTime" label="交易时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="140">
                  <template slot-scope="scope">
                    <el-button
                      @click="updateClick1(scope.row.id)"
                      type="text"
                      size="small"
                      >修改</el-button
                    >
                    <el-button
                      @click="delectClick1(scope.row.id)"
                      type="text"
                      size="small"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

              <div class="grid-content bg-purple-dark">
                <div class="block1">
                  <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="pageNum1"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize1"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total1"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeName: "first",
      /////////////////////////////////////////////////
      pageNum: 1,
      pageSize: 5,
      total: 1,
      /////////////////////////////////////////////////
      pageNum1: 1,
      pageSize1: 5,
      total1: 1,
      /////////////////////////////////////////////////
      form: {},
      form1: {},
      //一个页面一个 以此类推
      formInline: {},
      formInline2: {},

      tableData: [],
      tableData2: [],
      carNumbers: {},
      title: "",
      flag: false,
      dialogVisible: false,
      carStates: [
        { value: "0", label: "储值卡" },
        { value: "1", label: "记账卡" },
      ],
    };
  },
  created() {
    //查询油卡信息
    this.getCarFuelcard();
    this.getCarNumber();
    //查询油卡充值信息
    this.findcarfuelcardrelease();
  },
  methods: {
    //查询车牌号
    getCarNumber() {
      axios.get("/car/getCarNumber").then((res) => {
        console.log(res);
        this.carNumbers = res.data.data;
      });
    },
    //重置
    reset() {
      this.formInline = {};
      this.getCarFuelcard();
    },
    //搜索
    onSubmit() {
      this.getCarFuelcard();
    },
    //添加油卡
    addCarFuelcard() {
      this.dialogVisible = true;
      this.title = "添加etc";
      this.form = {};
      this.flag = false;
    },
    //添加油卡
    onaddSubmit() {
      if (!this.flag) {
        if (this.form.id != null) {
          axios.post("caretc/upetc", this.form).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              this.$message.success(res.data.data);
            }
          });
        } else {
          axios.post("caretc/addetc", this.form).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              this.$message.success(res.data.data);
            }
          });
        }
        this.getCarFuelcard();
      }

      this.dialogVisible = false;
      this.getCarFuelcard();
    },
    //删除油卡
    delectClick(id) {
      axios.post("caretc/deletc?id=" + id).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message.success("删除成功");
          this.getCarFuelcard();
        }
      });
    },
    //回显
    rejectClick(id) {
      this.title = "修改etc信息";
      this.dialogVisible = true;
      this.flag = false;
      this.form = {};
      axios.post("caretc/echoetc?id=" + id).then((res) => {
        console.log(res);
        this.form = res.data.data;
      });
      // this.dialogVisible = false;
      this.form = {};
      this.getCarFuelcard();
    },
    //查询
    getCarFuelcard() {
      axios
        .post(
          "caretc/findetcrPagination?pageSize=" +
            this.pageSize +
            "&pageNum=" +
            this.pageNum,
          this.formInline
        )
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////
    //修改
    updateClick1(id){
        this.$router.push({ path: "/addetcconsume", query: { id: id } })
    },
    //添加充值记录
    addCarrechargerecord() {
      this.$router.push("/addetcconsume");
    },
    
    //查询充值记录
    findcarfuelcardrelease() {
      axios
        .post(
          "carconsume/findconsumerPagination?pageSize=" +
            this.pageSize1 +
            "&pageNum=" +
            this.pageNum1 +
            "&type=0",
          this.formInline2
        )
        .then((res) => {
          console.log(res);
          this.tableData2 = res.data.data.records;
          this.total1 = res.data.data.total;
        });
    },
    //删除消费信息
    delectClick1(id) {
      axios.post("carconsume/delconsume?id=" + id).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.findcarfuelcardrelease();
          this.$message.success("删除成功");
        }
      });
    },
    //充值搜索
    onSubmit1() {
      this.findcarfuelcardrelease();
    },
    //充值重置
    reset1() {
    this.formInline2={}
      this.findcarfuelcardrelease();
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCarFuelcard();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getCarFuelcard();
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.findcarfuelcardrelease();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange1(val) {
      this.pageNum1 = val;
      this.findcarfuelcardrelease();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped>
/* element-ui样式 */
.el-row {
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #fff;
  border-radius: 10px;
}

/* 自定义样式 */
/* * {
                                                                            margin: 0px;
                                                                            padding: 0px;
                                                                        } */
.box {
  width: 98%;
  height: 100%;
  margin: auto;
  /* background-color: red; */
}

.block {
  padding-top: 20px;
  padding-left: 750px;
}
.block1 {
  padding-top: 20px;
  padding-left: 730px;
  /* border: 1px solid red; */
}
</style>
